import { useEffect, useState } from 'react';
import { Card, Typography, Button, Spin, Row, Col } from 'antd';
import axios from 'axios';
import { useParams } from 'react-router-dom';
// import './index.css'; // 确保导入了 CSS 文件

const {  Paragraph } = Typography;

const SentencePage = () => {
  const [sentences, setSentences] = useState([]);
  const [loading, setLoading] = useState(true);
  const { chapterId } = useParams(); // 获取chapterId

  useEffect(() => {
    const fetchSentences = async () => {
      try {
        const response = await axios.get(`/api/sentences/byChapterId?chapterId=${chapterId}`);
        setSentences(response.data);
      } catch (error) {
        console.error('Error fetching sentences:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchSentences();
  }, [chapterId]);

  if (loading) {
    return (
      <div style={{ textAlign: 'center', marginTop: '50px' }}>
        <Spin size="large" />
      </div>
    );
  }

  if (!sentences || sentences.length === 0) {
    return (
      <div>
        <p>No sentences found for this chapter.</p>
      </div>
    );
  }

  const handlePlayAudio = (audioUrl) => {
    // 播放音频的逻辑
    const audio = new Audio(audioUrl);
    audio.play();
  };

  const handleRecord = () => {
    // 录音的逻辑
    // 这里你需要根据实际需求集成一个录音库，比如使用Web Audio API或者第三方库如Recorder.js
    console.log('Recording...');
  };

  return (
    <div className="dialogue-page">
      <Row gutter={[24, 24]}>
        {sentences.map((sentence, index) => (
          <Col key={sentence.id} span={24}>
            <Card
              title={`Sentence ${index + 1}`}
              bordered={false}
              style={{ marginBottom: 15 }}
            >
              <Paragraph strong>{sentence.sentenceText}</Paragraph> {/* 英文句子 */}
              <Paragraph>{sentence.sentenceTranslation}</Paragraph> {/* 中文翻译 */}
              <Button type="primary" onClick={() => handlePlayAudio(sentence.audioUrl)}>
                Play
              </Button>
              <Button type="default" onClick={handleRecord} style={{ marginLeft: 8 }}>
                Record
              </Button>
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  );
};

export default SentencePage;